<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Item tracker</title>
  </head>
  <body>
    <div class="container mt-4">
      <div class="row"></div>
      <div class="col"></div>
      <div class="col">
        <h1>Email a report</h1>
        <form method="POST">
          <div class="mb-3">
            <label for="sender" class="form-label">Sender email address</label>
            <input type="email" class="form-control" id="sender" name="sender" placeholder="name@example.com">
            <div id="senderHelp" class="form-text">Sender email must be registered with Amazon SES.</div>
          </div>
          <div class="mb-3">
            <label for="recipient" class="form-label">Recipient email address</label>
            <input type="email" class="form-control" id="recipient" name="recipient" placeholder="name@example.com">
            <div id="recipientHelp" class="form-text">Recipient email must be registered with Amazon SES.</div>
          </div>
          <div class="mb-3">
            <label for="message" class="form-label">Message</label>
            <textarea class="form-control" id="message" name="message" rows="3">
Hey there.
This is a report of all work items with status '{{status_filter}}'.
I hope you like it!
            </textarea>
          </div>
          {% if items %}
          <table class="table">
            <thead>
            <tr>
              <th scope="col">Name</th>
              <th scope="col">Created</th>
              <th scope="col">Description</th>
              <th scope="col">Status</th>
            </tr>
            </thead>
            <tbody>
            {% for item in items %}
            <tr>
              <td>{{item.name}}</td>
              <td>{{item.formatted_date}}</td>
              <td>{{item.description}}</td>
              <td>{{item.status}}</td>
            </tr>
            {% endfor %}
            </tbody>
          </table>
          {% else %}
          {% if error %}
          <div class="alert alert-danger mt-3" role="alert">
            <p>Couldn't get items from table '{{table}}' with status '{{status_filter}}'!</p>
            <hr>
            <p class="mb-0">{{error}}</p>
          </div>
          {% else %}
          <div class="alert alert-warning mt-3" role="alert">
            No items found in table '{{table}}' with status '{{status_filter}}'.
          </div>
          {% endif %}
          {% endif %}
          <button type="submit" class="btn btn-primary">Send report</button>
        </form>
      </div>
      <div class="col"></div>
    </div>
  </body>
</html>
